<template>
  <div class="contents" style="overflow:auto">
 <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="content">
        <div class="polling">
            <matter :newData="newData"></matter>
            <div class="allbutton">
              <div :class="['all', allIndex ? 'colored' : '']" @click="alldata">全部</div>
              <div class="hits">
                <div :class="['work', indexed == index ? 'colored' : '']" v-for="(item,index) in dataList" :key="index" @click="dynamic(index,item.data)">{{item.button}}</div>
              </div>
            </div>
            <div class="pollings" @click="pollings">查询</div>
        </div>
          
      </div>
      <div class="item_content" v-for="(item,index) in postList" :key="index"  v-infinite-scroll="load"
      infinite-scroll-disabled="disabled">
        <div class="item_left">
          <div class="item_top">
            <span>0{{index+1}}</span>
            <h1>{{item.title}}</h1>
          </div>
          <div class="item_buttom">
            <span>TC20180904-010</span>
            <span class="line"></span>
            <span>2018-08-04  15:55:09</span>
          </div>
        </div>
        <div class="item_right">
          <span>{{item.money}}</span>
          <p>{{item.assessor}}</p>
        </div>
      </div>
      </van-pull-refresh>
      <p v-if="loading">加载中...</p>
    <p v-if="noMore">没有更多了</p>
  </div>
</template>

<script>
import  matter from '../components/text'
import { Toast } from 'vant';
import 'vant/lib/Toast/style';

export default {
  components:{
    matter
  },
  data(){
    return {
      // 模拟数据
      dataList:[{button:"在办",data:[{number:"TC20180904-010",title:"申请事项编号"},{number:"2018-08-04",title:"申请开始时间"},{number:"2017年度企业管理",title:"事项名称"},{number:"2018-09-04",title:"结束时间"}]},{button:"已办结",data:[{number:"TC20180905-010111",title:"申请事项编号"},{number:"2018-08-05",title:"申请开始时间"},{number:"2018年度企业管理",title:"事项名称"},{number:"2018-09-05",title:"结束时间"}]},{button:"不予兑现",data:[{number:"TC20180906-010222",title:"申请事项编号"},{number:"2018-08-06",title:"申请开始时间"},{number:"2019年度企业管理",title:"事项名称"},{number:"2018-09-06",title:"结束时间"}]},{button:"中止申请",data:[{number:"TC20180907-010333",title:"申请事项编号"},{number:"2018-08-08",title:"申请开始时间"},{number:"2020年度企业管理",title:"事项名称"},{number:"2018-09-08",title:"结束时间"}]}],
      // 按钮默认索引值
      indexed:0,
      allIndex:false,
      // 当前点击按钮数据
      newData:"",
      // 模拟数据
      postList:[{title:"投资促进局一事一议或一企一策的扶持奖金",money:"1:00元",assessor:"预审不通过"},{title:"招商单位引荐内资非用地项目奖励金",money:"0:00元",assessor:"已拨付"},{title:"上市企业管理团队招商奖励",money:"1:00元",assessor:"通过预审"}],
      isLoading: false,
      // count: 0
      loading: false
     
    }
  },
    computed: {
      noMore () {
        return this.postList.length >= 4
      },
      disabled () {
        return this.loading || this.noMore
      }
    },
   methods:{
      dynamic(index,data){
        this.indexed= index;
        this.allIndex = false;
        this.newData=data;
        // console.log(data);
        
      },
      // 点击全部按钮触发
      alldata(){
        this.allIndex = true;
        this.indexed= 8;
        Toast.fail('暂无数据');
      },
      pollings(){
        Toast.loading({
        message: '加载中...',
        forbidClick: true
        });
      },
      // 下拉刷新触发
      onRefresh(){
      this.newData = this.dataList[0].data;
      this.indexed=0;
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
        //  this.count++;
      }, 1000);
      },
     load () {
        this.loading = true
        setTimeout(() => {
          this.count += 1
          this.postList = [...this.postList,{title:"投资促进局一事一议或一企一策的扶持奖金",money:"1:00元",assessor:"预审不通过"}]
          this.loading = false
        }, 2000)
      }
     
          // this.postList = [...this.postList,{title:"投资促进局一事一议或一企一策的扶持奖金",money:"1:00元",assessor:"预审不通过"}]
        
  
    },
    // 初始化数据
    created(){
       this.newData = [{number:"TC20180904-010",title:"申请事项编号"},{number:"2018-08-04",title:"申请开始时间"},{number:"2017年度企业管理",title:"事项名称"},{number:"2018-09-04",title:"结束时间"}]
    },
   

}
</script>

<style lang="less" scoped>

.contents{
  padding: 0 3.472vw;
  margin-top: 4.167vw;
  .content{
    padding: 4.028vw 6.389vw;
    border: 0.278vw solid #e6e6e6;
    border-radius: 1.944vw;
    margin-bottom:10vw;
    .polling{
      .allbutton{
        display: flex;
        margin-top: 5vw;

        .all{
          flex: 2;
        height: 20.972vw;
        font-size: 3.333vw;
        text-align: center;
        line-height: 20.972vw;
        border: 0.278vw solid #efefef;
        border-radius: 0.833vw;
        margin-right:1.944vw;
      }
      .hits{
        flex: 3;
        // background-color: red;
        overflow: hidden;
        .work{
          float: left;
          width: 21vw;
          height: 10vw;
          font-size: 3.333vw;
           box-sizing: border-box;
          border: 0.278vw solid #eee;
          border-radius: 0.833vw;
          text-align: center;
          line-height: 9vw;
          &:nth-child(2n + 1){
            margin-right: 2.5vw;
          }
           &:nth-child(2){
            margin-bottom: 1.667vw;
          }
           &:nth-child( 1){
            margin-bottom: 1.667vw;
          }
        }
       
      }
      .colored{
        color: #7fbbd2;
        border: 0.278vw solid #7fbbd2 !important;
}

      }
      .pollings{
        height: 10.833vw;
        background-color: #00a1ea;
        text-align: center;
        line-height: 10.833vw;
        margin-top: 3.611vw;
        color: #fff;
        font-size: 3.333vw;
      }
    }
  }
  .item_content{
    display: flex;
    justify-content: space-between;
    margin-top:5.556vw;
    padding:1.667vw 0 1.667vw 2.222vw;
    border: 0.278vw solid #e6e6e6;
    border-radius: 1.389vw;
    .item_left{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .item_top{
        display: flex;
        // justify-content: space-between;
        align-items: center;
        &>span{
          color: #9b9b9b;
          display: block;
          width: 8.611vw;
          height: 8.611vw;
          border-radius: 50%;
          line-height: 8.611vw;
          text-align: center;
          font-size: 3.333vw;
          background-color: #ededed;
          margin-right: 3.056vw;
        }
        h1{
          font-size: 3.889vw;
          font-weight: normal;
          color: #5b5b5b;
        }
      }
      .item_buttom{
        font-size: 3.056vw;
        color: #bfbfbf;
        text-align: center;
        padding-left: 6vw;
        .line{
          height: 3.333vw;
          border-left: 0.278vw solid #bfbfbf;
          margin: 0 2.222vw;

        }
      }

    }
    .item_right{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      width: 20.556vw;
      height: 16.111vw;
      background-color: #00a1ea;
      color: #fff;
      border-top-left-radius: 1.389vw;
      border-bottom-left-radius: 1.389vw;
      span{
        font-size: 3.889vw;
      }
      p{
        font-size: 3.333vw;
      }
    }
  }
}

</style>